FAB Floating action buttonsGuidelines 懸浮按鈕指導規則
Usage 用法
FAB 的使用位置包括底部導航欄和介面懸浮兩種方式。
- FAB（浮動操作按鈕）是用來完成最重要操作的按鈕，一般放在螢幕的上方或下方。
- 這個按鈕要容易看到，並且和其他介面元素保持適當距離，讓使用者好點選。
- 我們主要用FAB來做重要的操作，比如新建內容或開啟主要功能。
FAB 型別
- 標準 FAB（FAB）
- 小型 FAB（Small FAB）
- 大型 FAB（Large FAB）
Anatomy 結構
Container 容器
單一 FAB：單個 FAB 適用於提供一個主要操作，例如“撰寫訊息”或“新增專案”。
Icon 圖示
當需要提供多個相關操作時，可以使用 FAB 組，這通常以主 FAB 展開多個子 FAB 的形式存在。例如，在訊息應用中，主 FAB 可以展開以提供不同型別的操作，如“傳送訊息”“新建群聊”等。
標準 FAB
- 在社交媒體應用中用於“釋出”或“分享”。
- 在檔案管理應用中用於“新增新檔案”。
- 在聊天應用中用於“傳送訊息”或“新建會話”。
小型 FAB
在地圖應用中，提供“導航”或“當前位置”功能。在日曆應用中，用於“新增日程”或“快速檢視”。
大型 FAB（Large FAB）
- 在聯絡人應用中，作為“新建聯絡人”按鈕。
- 在郵件應用中，用於“撰寫郵件”。
- 在社交平臺上，作為“建立新帖子”按鈕。
Responsive Layout 響應式佈局
擴充套件視窗尺寸（Expanded Window Size）
- 當應用程式在更大的螢幕上執行時，FAB 可能需要調整位置，以適應更復雜的 UI 結構。
- FAB 應該與螢幕上的其他互動元素保持適當的間距，以確保良好的可訪問性。
Behavior 行為
Appearing 出現
FAB 按鈕在顯示和隱藏時會有簡單的動畫效果。
這個按鈕雖然會跟隨頁面內容變化，但它是獨立存在的，不會固定在其他介面元素上。因為 FAB 按鈕很重要，所以它的動畫效果會和普通介面元素不一樣。
Screen Transitions 螢幕轉換
FAB 可以變化形態以啟動相關操作。當螢幕布局發生變化時，FAB 應該在轉換過程中消失並重新出現。
Reappearance 重新出現
FAB 僅在對新螢幕仍然具有相關性時才應重新出現，並儘可能保持在相同的位置。
Expanding 展開
FAB 可以展開並適應不同的形態，以提供更多操作選項或擴充套件功能。
Actions 動作
FAB 適用於觸發當前介面的主要操作，或執行建立新內容的操作。
適用於重要、積極的互動，例如：
- 建立（Create）
- 收藏（Favorite）
- 分享（Share）
- 啟動流程（Start a process）
避免使用 FAB 進行次要、破壞性或干擾性操作，比如次要、溢位、不清晰或破壞性的操作。
- 存檔或刪除（Archive or trash）
- 警告或錯誤（Alerts or errors）
- 受限操作（如複製文字）
- 更適合滑塊的控制功能（如調整音量或字型大小）
Scrolling 滾動
- 在滾動時，FAB 應該保持固定在螢幕上方，避免影響使用者瀏覽內容。
- 也可以使用擴充套件 FAB，在滾動時收縮為小型 FAB，並在底部停留時展開。
Moving Across Tabs 在標籤之間移動
- 當使用者在不同標籤頁之間切換時，FAB 應該短暫消失，然後在新內容載入完成後重新出現。
- 這表明 FAB 不是固定在某個特定的標籤頁，而是與內容關聯的動態元素。
FAB 在標籤切換時應短暫消失並重新出現，以匹配新內容。
Interaction & Style 互動與樣式
Focus 焦點
- FAB 應該在焦點狀態下有明顯的視覺提示，例如高亮邊框或陰影增強。
- 適用於鍵盤導航或螢幕閱讀器的使用者，以確保無障礙體驗。
Layout & Position 佈局與位置
- FAB 應該放置在使用者容易點選的位置，例如螢幕右下角或底部導航欄附近。
- 避免完全覆蓋重要內容，確保不會干擾主要互動區域。
